<template>
  <div v-drag class="info-card">
    <el-card style="max-width: 580px;max-height: 400px;" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>施工公告信息</span>
          <span class="close" @mousedown.stop @click="closeCard">x</span>
        </div>
      </template>
      <p class="item">公告发布时间:{{ data[data.length-1].time }}</p>
      <div class="item">公告内容:{{ data[data.length-1].announcement }}</div>
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
})
const closeCard = () => {
    document.querySelector('.info-card').style.display = 'none';
}
</script>

<style lang="scss" scoped>
.info-card{
    position: absolute;
    top: 20%;
    left: 30%;
    width: 600px;
    z-index: 99;
    span{
        font-size: 1.5em;
        color: #777;
        font-weight: 600;
    }
    .close{
        position: absolute;
        right: 50px;
        font-size: 16px;
        color: #bbb;
        cursor: pointer;
        padding: 5px;
    }
    .item{
        font-size: 1.1em;
        font-weight: 600;
    }
    div.item{
        height: 100px;
        margin-top: 10px;
    }
}
:deep(.el-card__header){
  padding: 10px 20px;
}
</style>
